<template>
  <div class="app-container">
    <audit-filter @on-filter="submitFilterForm"/>
    <el-table
      border
      :data="tableData.list" v-loading="loading" element-loading-text="加载中..." class="el-table-align-center">
      <el-table-column label="提现时间" prop="withdrawNo" width="180" align="center">
        <template slot-scope="{row}">
          <div>{{row.createTime | toTime}}</div>
        </template>
      </el-table-column>
      <el-table-column label="提现单号" prop="orderId" width="180" align="center">
      </el-table-column>
      <el-table-column label="出款类型" prop="withdrawType" align="center">
          <template slot-scope="{row}">
          {{ row.withdrawType | toConverter('OUT_TYPE_PAY')}}
        </template>
      </el-table-column>
      <el-table-column label="操作类型" prop="accountType" align="center">
        <template slot-scope="{row}">
          {{ row.type | toConverter('WITHDRAW_TYPE')}}
        </template>
      </el-table-column>
      <el-table-column label="账户类型" prop="accountType" align="center">
        <template slot-scope="{row}">
          {{ row.userType | toConverter('ACCOUNT_TYPE')}}
        </template>
      </el-table-column>
      <el-table-column label="账户名" prop="username" align="center">
      </el-table-column>
      <el-table-column label="提现金额 " prop="amount" align="center">
         <template slot-scope="{row}">
          {{row.amount | currency}}
        </template>
      </el-table-column>
      <el-table-column label="申请人" prop="creator" align="center">
      </el-table-column>
      <el-table-column label="审核人" prop="approver" align="center">
      </el-table-column>
      <el-table-column label="审核时间" align="center">
        <template slot-scope="{row}">
          {{row.approveTime | toTime}}
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="status" align="center">
        <template slot-scope="{row}">
          {{row.status | toConverter('REORDER_AUDIT_STATUS')}}
        </template>
      </el-table-column>
      <el-table-column label="备注" prop="remark">
      </el-table-column>
      <el-table-column label="操作" width="80" align="center">
        <template slot-scope="{row}">
          <el-button type="text" @click="openAuditDialog(row)"
                    v-if="row.status == 0 && roleCheck('withdraw-operation-audit-btn') &&dataRoleCheck(dataPermissionObj[row.withdrawType])">审核
          </el-button>
          <span v-else>-</span>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination background @size-change="gridSizeChange" @current-change="gridCurrentChange"
                     :current-page="filters.page" :page-sizes="gridPageSize" :page-size="filters.size"
                     :layout="gridLayout" :total="tableData.total">
      </el-pagination>
    </div>
    <audit-withdraw-dialog
      v-if="dialogName === staticDialogName"
      v-model="dialogVisible"
      :id="dialogProps.orderId"
      :row-data="dialogProps"
      :step = "step"
      :menuId="menuId"
      @submit="submitFinished"/>
  </div>
</template>


<script>
import { getWithdrawAuditList } from '@/services/api/withdraw';
import { grid, dialog } from '@/build';
import AuditFilter from '@/views/finance/withdraw/auditFilter';
import AuditWithdrawDialog from '@/views/finance/withdraw/auditWithdrawDialog';

export default {
  name: 'withdraw-audit',
  components: { AuditWithdrawDialog, AuditFilter },
  mixins: [grid, dialog],
  data() {
    return {
      tableData: {},
      rowData: {},
      filters: {
        limit: 20,
        page: 1,
        type: 1,
        status: consts.ALL,
        startTime: moment().format('YYYY-MM-DD 00:00:00'),
        endTime: moment().format('YYYY-MM-DD 23:59:59'),
      },
      dialogVisible: false,
      staticDialogName: 'audit-withdraw-dialog',
      step: 'agree',
      dataPermissionObj: {
        0: 'manualWithdraw-audit',
        1: 'thirdAutoWithdraw-audit',
        2: 'thirdManualWithdraw-audit',
      },
      menuId: undefined,
    };
  },
  methods: {
    setStep(step) {
      this.step = step;
    },
    openAuditDialog(row) {
      this.menuId = dataPermission.DATA_PERMISSION[this.dataPermissionObj[row.withdrawType]];
      this.openDialog({ dialogName: this.staticDialogName, props: row });
    },
  },
  mounted() {
    this.bindGet(getWithdrawAuditList, 'tableData', {
      action: 'getGrid',
      sendingData: 'filters',
      beforeSend: (data) => {
        delete data.time;
        return data;
      },
    });
    this.getAll();
  },
};
</script>

<style scoped>

</style>
